<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>快音</title>
    <link rel="stylesheet" href="__JS__/mescroll.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background: #f3f3f3;
            text-decoration: none;
        }

        .list {
            position: relative;
        }

        .list li {
            float: left;
            list-style: none;
            visibility: hidden;
        }

        .box {
            overflow: hidden;
            font-size: 0;
        }

        .box img {
            width: 100%;
            height: auto;
        }

        .box p {
            display: flex;
            display: -webkit-flex;
            align-items: center;
            justify-content: center;
            float: right;
            height: 25px;
        }

        .sp1 {
            width: 14px;
            height: 14px;
            vertical-align: middle;
            background: url("") center no-repeat;
            background-size: contain;
            display: inline-block;
        }

        .sp2 {
            font-size: 12px;
            margin-right: 5px;
            margin-left: 5px;
            color: #b9b8b6;
        }

        .layer {
            display: none;
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: #000;
            margin: 0 auto;
            z-index: 200;
        }

        .layer .close {
            color: #fff;
            width: 40px;
            font-size: 20px;
            line-height: 20px;
            margin-left: 10px;
            margin-top: 10px;
            padding-left: 20px;
            vertical-align: middle;
            background: url() left no-repeat;
            background-size: contain;
            position: fixed;
            z-index: 201;
            height: 20px;
        }

        .aside {
            width: 35px;
            z-index: 999999999;
            position: fixed;
            right: 10px;
            bottom: 9%;
            text-align: center;
            color: #fff;
        }

        .aside .zan {
            color: #fff;
            width: 24px;
            height: 24px;
            background: url(/public/static/img/h5/zan1.svg) left no-repeat;
            background-size: contain;
            margin: 0 auto;
        }

        .aside .share {
            color: #fff;
            width: 24px;
            height: 24px;
            background: url(/public/static/img/h5/share.svg) left no-repeat;
            background-size: contain;
            margin: 0 auto;
        }

        .aside .zan.active {
            background: url(/public/static/img/h5/zan2.svg) left no-repeat;
            background-size: contain;
            color: #fd4d5e
        }

        .aside .span {
            font-size: 10px;
            margin: 3px 0 5px 0;
        }
    </style>
</head>
<body>
<div class="page__bd mescroll" id="mescroll">
    <div class="list"></div>
</div>
<!--隐藏的播放器页面-->
<div class="layer">
    <div class="close"></div>
    <div class="vod_box" style="height: 100%;">
        <video width="100%" height="100%" poster="/public/static/img/1.png" loop>
            <source type="video/mp4" src="">
        </video>
    </div>
    <div class="aside">
        <div class="zan"></div>
        <div class="span zan_num">1</div>
        <div class="share"></div>
        <div class="span">分享</div>
    </div>
</div>
<script id="tpl" type="text/html">
    <% for(i = 0; i < list.length; i++){ %>
    <li>
        <div class="box">
            <img class="pic" src="<%= list[i].pic %>"
                 data-id="<%= list[i].id %>"
                 data-fid="<%= list[i].fileId %>"
                 data-url="<%= list[i].fileUrl %>"
                 data-love="<%= list[i].love %>" alt="">
            <p>
                <span class="sp1"></span>
                <span class="sp2"><%= list[i].love %></span>
            </p>
        </div>
    </li>
    <% } %>
</script>
<script src="__JS__/jquery.min.js"></script>
<script src="__JS__/template-web.js"></script>
<script src="__JS__/mescroll.min.js"></script>
<script src="__JS__/wookmark.min.js"></script>
<script src="__JS__/imagesloaded.pkgd.min.js"></script>
<script src="__JS__/common.js?v={$Think.config.commonJs}"></script>
<script>
    var $list = $('.list');
    var $layer = $('.layer');
    var player = document.querySelector("video");

    var li_offset = document.body.clientWidth / 200;
    var li_width = (document.body.clientWidth - li_offset) / 2;

    var mescroll = new MeScroll("mescroll", {
        down: {
            auto: false,
            offset: 50,
            outOffsetRate: 0.05,
            inOffsetRate: 0.35,
            callback: downCallback //下拉刷新的回调
        },
        up: {
            auto: true,
            callback: upCallback //上拉回调
        }
    });

    function downCallback(mescroll) {
        setTimeout(function () {
            $list.html('');
            mescroll.resetUpScroll(false);
        }, 150);
    }

    function upCallback(page) {
        var pageNum = page.num;
        var pageSize = page.size;

        $.ajax({
            url: '/kv_index',
            type: 'POST',
            dataType: 'json',
            data: {pageNum: pageNum, pageSize: pageSize},
            success: function (res) {
                mescroll.endBySize(res.data.length, res.totalSize);

                res.data.sort(function () {
                    return Math.random() - 0.5;
                });

                $list.append(template('tpl', {list: res.data}));

                $(".list li").css("width", li_width);

                $list.imagesLoaded(function () {
                    //瀑布流布局
                    new Wookmark('.list', {
                        align: 'left',
                        itemWidth: li_width,
                        offset: li_offset
                    });

                    $(".list li").css("visibility", "visible");
                });
            },
            error: function (e) {
                mescroll.endErr();
            }
        });
    }

    //点击li播放视频
    var cid, fid, love;
    $list.on('click', '.pic', function () {
        love = $(this).data("love");
        cid = $(this).data("id");
        fid = $(this).data("fid");

        player.src = $(this).data("url");
        player.play();

        $(".zan_num").html(love);

        $layer.show();

        //视频分享
        $(".share").click(function () {
            var json = {
                'url': location.origin + "/share_page2?fid=" + fid,
                'img': 'https://dv.52daohang.com/images/52-logo.png',
                'title': 'Cbox短视频',
                'content': '极致感官体验，畅享海量短视频'
            };

            window.android._app_share(JSON.stringify(json));
        });

        //视频点赞
        $(".zan").click(function () {
            $(this).addClass('active');

            //更新点赞状态
            $(".zan_num").html(parseInt(love) + type);

            $.ajax({
                url: '/vod_zan?' + Math.random(),
                type: "GET",
                dataType: "json",
                data: {fid: fid, type: 1},
                success: function (res) {
                    pd_zan5M();
                }
            });
        });

        //禁止页面滚动
        document.body.addEventListener('touchmove', scrollStop, {passive: false});
    });

    //关闭播放页
    $(".close").click(function (e) {
        e.stopPropagation();

        $layer.hide();
        player.pause();
        video_stats(fid);

        //开启页面滚动
        document.body.removeEventListener('touchmove', scrollStop, {passive: false});
    });

    //禁止页面滚动
    function scrollStop(e) {
        e.preventDefault();
    }

    var lock;
    !function () {
        //滑动监听开始位置
        var startX = 0; //记录开始位置
        document.querySelector(".layer").addEventListener("touchstart", function (e) {
            startX = e.touches[0].clientX;
        });

        //滑动监听结束位置
        document.querySelector(".layer").addEventListener("touchend", function (e) {
            var distanceX = e.changedTouches[0].clientX - startX;  //求得手指滑动的位移
            var xRange = 85; //滑动x轴范围

            console.log('滑动监听');

            lock = true;
            //右滑处理 //获取上一个视频
            if (distanceX > xRange && lock) {
                lock = false;
                get_next_vod(cid, 'after');
            }

            //左滑处理 //获取下一个视频
            if (distanceX < -xRange && lock) {
                lock = false;
                get_next_vod(cid, 'before');
            }
        });
    }();

    function get_next_vod(id, sort) {
        $.ajax({
            url: '/get_next_vod',
            type: "POST",
            dataType: "json",
            data: {id: id, sort: sort},
            success: function (res) {
                if (res.code == 200) {
                    player.src = res.data.fileUrl;
                    setTimeout(function () {
                        player.play();
                    }, 150);

                    //video_stats(fid);
                    cid = res.data.id;
                    love = res.data.love;
                    fid = res.data.fileId;

                    console.log(cid);

                    $(".zan_num").html(love);
                } else {
                    $(".close").trigger("click");
                }

                lock = true;
            }
        });
    }

    //视频统计
    function video_stats(current_vid) {
        $.ajax({
            url: '/video_stats_index',
            type: "POST",
            dataType: "json",
            xhrFields: {withCredentials: true},
            data: {
                'currentTime': player.currentTime,
                'current_vid': current_vid,
                'type': "inline",
                'channel': 31,
                'exp': (player.currentTime / player.duration > 0.7) ? 1 : 0
            },
            success: function (res) {
                console.log(res);
            }
        });
    }
</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?7741d4cbd941d985eb296c908ef40bf2";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script>
</body>
</html>